<template>
  <div class="app-home">
    <ManageHeader></ManageHeader>
    <div class="app-content">
      <div class="main">
        <div class="head">
          <span class="active" v-if="type == 1">
            宏观数据填报-县（市、区）、开发区
          </span>
          <span class="active" v-if="type == 2">
            宏观数据填报-阳曲示范区
          </span>
          <span class="active" v-if="type == 3">
            宏观数据填报-县（市、区）、开发区
          </span>
          <span class="active" v-if="type == 4">作战图数据-编辑</span>
          <span class="back" @click="$router.go(-1)">返 回</span>
        </div>
        <div class="content" v-if="type == 1">
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>规模以上工业增加值增速（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>社会消费品零售额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>进出口总额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>一般公共预算支出（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民人均可支配收入（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民消费价格指数： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>规模以上工业增加值增速（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>社会消费品零售额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>进出口总额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>一般公共预算支出（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民人均可支配收入（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民消费价格指数： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            五年规划周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值增长率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>规模以上工业企业数（户）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资增长率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>社会消费品零售额增长率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>进出口总额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>一般公共预算支出增长率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民人均可支配收入（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>居民消费价格指数： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <div class="btn">
            保 存
          </div>
        </div>
        <div class="content" v-if="type == 2">
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农产品加工业产值（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农业总产值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>绿色有机产品覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目完成投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农产品加工业产值（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农业总产值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>绿色有机产品覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目完成投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            五年规划周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农产品加工业产值（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>农业总产值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>绿色有机产品覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目完成投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <div class="btn">
            保 存
          </div>
        </div>
        <div class="content" v-if="type == 3">
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>旅客过夜人次（万人次）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>年景区接待人次（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>森林覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            宏观数据周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>旅客过夜人次（万人次）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>年景区接待人次（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>森林覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">
            五年规划周期：
            <el-input
              v-model="text"
              type="text"
              placeholder="请输入"
              clearable
            ></el-input>
          </p>
          <div class="flex-box">
            <p>
              <span>地区生产总值（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>新建产业项目投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固定资产投资（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>旅客过夜人次（万人次）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>年景区接待人次（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>森林覆盖率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <div class="btn">
            保 存
          </div>
        </div>
        <div class="content" v-if="type == 4">
          <p class="title">招商引资考核指标：项目签约情况</p>
          <div class="flex-box">
            <p>
              <span>签约项目数（个）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>签约项目投资额目标任务（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>签约项目投资额完成额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>签约项目投资额完成率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>签约项目投资额贡献率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>签约项目投资额完成情况得分（5分）：</span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">招商引资考核指标：项目开工情况</p>
          <div class="flex-box">
            <p>
              <span>开工项目计划投资额目标任务（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>开工项目计划投资额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>开工项目计划投资额完成率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>开工项目计划投资额贡献率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>开工项目计划投资额完成情况得分（20分）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <p class="title">招商引资考核指标：资金到位情况</p>
          <div class="flex-box">
            <p>
              <span>固投项目到位资金额目标任务（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固投项目到位资金额（亿元）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固投项目到位资金额完成率（%）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固投项目到位资金额贡献率(%)： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
            <p>
              <span>固投项目到位资金额完成情况得分（15分）： </span>
              <el-input
                v-model="text"
                type="text"
                placeholder="请输入"
                clearable
              ></el-input>
            </p>
          </div>
          <div class="btn">
            保 存
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ManageHeader from "@/components/manageHeader.vue";
export default {
  components: {
    ManageHeader,
  },
  data() {
    return {
      type: 0,
      id: null,
      text: "",
    };
  },
  mounted() {
    let { id, type } = this.$route.query;
    console.log(id, type);
    this.id = id;
    this.type = type;
  },
};
</script>

<style lang="less" scoped>
.app-home {
  width: 100%;
  height: 100%;
}
.app-content {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  background: #fafafa;
  overflow: hidden;
}
.main {
  margin: 0 auto;
  padding: 0 30px;
  width: 1500px;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
}
.head {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  text-align: left;
  position: relative;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
  .back {
    position: absolute;
    top: 21px;
    right: 0;
    width: 100px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
  }
}
.content {
  height: calc(100% - 80px);
  padding: 20px 0 0;
  overflow: hidden;
  text-align: left;
  p.title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    line-height: 48px;
    /deep/ .el-input {
      width: 529px;
      height: 32px;
      background: #ffffff;
      opacity: 0.85;
      border-radius: 5px;
    }
    /deep/ .el-input__inner {
      width: 529px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #cccccc;
      opacity: 0.85;
      border-radius: 5px;
    }
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    p {
      flex: 0 0 25%;
      span {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        line-height: 34px;
      }
    }
    /deep/ .el-input {
      width: 300px;
      height: 32px;
      background: #ffffff;
      opacity: 0.85;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    /deep/ .el-input__inner {
      width: 300px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #cccccc;
      opacity: 0.85;
      border-radius: 5px;
    }
  }
  .btn {
    margin: 0 auto;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: #446db3;
    border-radius: 8px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .content {
    padding: 20px 0;
    overflow-y: auto;
    scrollbar-color: #446db3 #ecf2fb; //滚动条轨道颜色   滚动条滑块的颜色
    scrollbar-width: 12px;
    scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 12px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 12px;
      background: #446db3;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: #e9f3ff;
      background: rgba(97, 142, 223, 0.1);
      border-radius: 12px;
    }
  }
}

/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .content .flex-box p {
    flex: 0 0 33%;
    span {
      font-size: 14px;
    }
  }
}

</style>
